<template>
	<div>
		<el-breadcrumb>
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>洗车订单</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div style="margin-top: 15px; display: inline-block;padding-right: 20px;">
				<div style="display: inline-block;width: 350px; float: left;">
					订单信息：<el-input v-model="queryInfo.id" placeholder="请输入订单号" style="width: 200px;"></el-input>
				</div>
				<div style="display: inline-block; float: left;width: 350px;">
					订单状态：
					<el-select v-model="queryInfo.value" placeholder="请选择订单状态">
						<el-option v-for="item in queryInfo.state" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div style="display: inline-block; float: right;">
					订单时间：
					<el-date-picker v-model="queryInfo.date" type="datetimerange" start-placeholder="开始日期"
						end-placeholder="结束日期" :default-time="['12:00:00']">
					</el-date-picker>
				</div>
				<div style="display: inline-block;width: 400px; float: left;">
					<el-button type="primary" @click="selectIndents">筛选</el-button>
					<el-link type="primary" click="selectIndents">清空筛选条件</el-link>
				</div>
				<div style="display: inline-block; float: left;">
					<el-button type="primary">导出订单</el-button>
				</div>
			</div>
			<el-table :data="indentList" style="width: 100%">
				<el-table-column prop="id" label="订单编号"></el-table-column>
				<el-table-column prop="sid" label="服务编号"></el-table-column>
				<el-table-column prop="service.serviceItem" label="服务名称"></el-table-column>
				<el-table-column prop="user.phone" label="买家">
					<template slot-scope="scope">
					{{ scope.row.user.name }}
					{{ scope.row.user.phone }}
					</template>
				</el-table-column>
				<el-table-column prop="merchant.name" label="商家">
					<template slot-scope="scope">{{ scope.row.service.merchant.name }}</template>
				</el-table-column>
				<el-table-column prop="service" label="价格">
					<template slot-scope="scope">
						原价：{{ scope.row.service.originalPrice }}<br />
						优惠：{{ scope.row.service.originalPrice-scope.row.service.presentPrice }}<br />
						现金：{{ scope.row.service.presentPrice }}
					</template>

				</el-table-column>
				<el-table-column prop="state" label="订单状态">
					<template slot-scope="scope">
						<span v-if="scope.row.state === 0">已取消</span>
						<span v-else-if="scope.row.state === 1">已完成</span>
						<span v-else-if="scope.row.state === 2">待支付</span>
						<span v-else-if="scope.row.state === 3">待核销</span>
						<span v-else-if="scope.row.state === 4">已退款</span>
						<span v-else>未知状态</span>
					</template>
				</el-table-column>
				<el-table-column prop="predate" label="预约时间"></el-table-column>
				<el-table-column prop="pladate" label="下单时间"></el-table-column>
				<el-table-column prop="level" label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="修改" :enterable="false" placement="top">
							<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
						</el-tooltip><br />
						<el-tooltip class="item" effect="dark" content="删除" :enterable="false" placement="top">
							<el-button type="danger" icon="el-icon-delete" @click="deleteIndentById(scope.row.id)"
								size="mini"></el-button>
						</el-tooltip><br />
						<el-tooltip class="item" effect="dark" content="详情" :enterable="false" placement="top">
							<el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog title="详情" :visible.sync="dialogFormVisible" @close="resetAddRole()">
			<el-form :model="addrole" ref='addroleref'>
		
				<el-form-item label="角色:" label-width="150px" prop="rolename">
					<el-input v-model="addrole.rolename" placeholder="请输入角色" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="描述:" label-width="150px" prop="roledesc">
					<el-input v-model="addrole.roledesc" placeholder="请输入描述" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetAddRole">取 消</el-button>
				<el-button type="primary" @click="addRole">确 定</el-button>
			</div>
		</el-dialog>
		

	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					date: '',
					id: '',
					pageNum: 1,
					pageSize: 2,
					total: 0,
					state: [{
							value: 0,
							label: '已取消'
						},
						{
							value: 1,
							label: '已完成'
						},
						{
							value: 2,
							label: '待支付'
						},
						{
							value: 3,
							label: '待核销'
						},
						{
							value: 4,
							label: '已退款'
						}
					],
					value: '',
					id: ''
				},
				indentList: [],
			}
		},
		mounted() {
			this.selectIndents();
		},
		methods: {
			//每页显示条数，发生改变除法条数
			handleSizeChange(size) {
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectIndents();
				//console.log(`每页 ${val} 条`);
			},
			//每页显示条数，发生改变除法条数
			handleCurrentChange(pn) {
				this.queryInfo.pageNum = pn;
				this.selectIndents();
				//console.log(`当前页: ${val}`);
			},
			//分页展示
			async selectIndents() {
				// 调用后端接口
				var res = await this.$http.get('selectIndents?pageNum=' + this.queryInfo.pageNum + '&pageSize=' + this
					.queryInfo.pageSize + '&id=' + this.queryInfo.id + '&state=' + this.queryInfo.value);
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					this.queryInfo.id = '';
					this.queryInfo.value = '';
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.indentList = res.data.data.list;
					// 查询总条数，赋值给total
					this.queryInfo.total = res.data.data.total;
					this.queryInfo.id = '';
					this.queryInfo.value = '';
					console.log(this.indentList)
				}
			},
			//根据删除
			deleteIndentById(id) {
				this.$confirm('此操作将永久删除该对象, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this.$http.get('deleteIndentById?id=' + id)
					if (res.data.code == 400) {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
						return;
					}
					if (res.data.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.selectIndents();
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		}
	}
</script>

<style>
	.el-card {
		margin-top: 15px;
	}

	.el-pagination {
		margin-top: 20px;
	}
</style>
